<template>
  <div>
    <my-header backBtn>
      <div slot="title">
        报警详情
      </div>

    </my-header>
    <baidu-map class="bm-view"
               :style="'height:'+height+'px' "
               :zoom="zoom"
               :center="center"
               @ready="handlerMap"
               :scroll-wheel-zoom="true"
               ak="wpjzuT9FyGlqzF9ZeolLwmWZXRz2XZst">
      <bm-marker :top="true"
                 :icon="icon"
                 :position="center"
                 animation="BMAP_ANIMATION_BOUNCE">
      </bm-marker>
      <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
      <!-- <bm-control :offset="{height:20,width:30}"  class="r-control" >
        <div class="dianchi">
          <img src="static/img/power-5.png" class="power-img" v-if="power<=0.5">
          <img src="static/img/power-20.png" class="power-img" v-else-if="power<=2">
          <img src="static/img/power-30.png" class="power-img" v-else-if="power<=3">
          <img src="static/img/power-50.png" class="power-img" v-else-if="power<=5">
          <img src="static/img/power-70.png" class="power-img" v-else-if="power<10">
          <img src="static/img/power-100.png" class="power-img" v-if="power===10">
          <div v-if="power<=0" class="p-0">0%</div>
          <div v-else-if="power<10" class="p-0">{{power}}0%</div>
          <div v-if="power===10" class="p-1">100%</div>
        </div>
        <div class="dianchi">
           <div class="mm-control" @click="jiaZoom">+</div>
           <div  class="mm-control" @click="jianZoom">-</div>


        </div>
      </bm-control> -->


    </baidu-map>
    <!-- 底部菜单-->
    <div style="width: 100%;text-align: left;">
      <div style="width: 100%;text-align: left;">
        <div style="padding: 10px;line-height: 30px;">
            <div class="db_inline">
              <div><img src="@/../static/img/location.png" style="width: 20px">{{add}}
              </div>
              <div>报警时间：{{bjTime}}</div>
              <div>宝贝名字：{{s_name}}</div>
            </div>
          </div>

        </div>
    </div>

  </div>

</template>
<script>
  import {BaiduMap, BmMarker, BmControl} from 'vue-baidu-map'
  import wx from "weixin-js-sdk";
  import Axios from 'axios/index'
  import Cookies from 'js-cookie';

  export default {
    components: {
      BaiduMap,
      BmMarker,
      BmControl
    },
    prop: {
      height: {
        type: String,
        default: '300'
      }
    },
    data() {
      return {
        zoom: 19,
        s_name:'',
        height: document.body.clientHeight - 150,
        width: document.body.clientWidth,
        center: '',
        map: null,
        BMap: null,
        add:'',
        bjTime: '',
        icon:''
      }
    },
    methods: {
      handlerMap({BMap, map}) {
        this.map = map;
        this.BMap = BMap;
        this.addControl();
      },
      addControl(){
        // 添加比例尺控件
        let scaleCtrl = new BMap.ScaleControl();
        // 添加比例尺控件
        this.map.addControl(scaleCtrl);
      }
    },
    mounted() {
      let data = this.$route.query;
      if (!data.lat){
        this.$weui.topTips('无定位数据');
      }
      this.s_name = data.name;
      this.center = {lng: data.lng, lat: data.lat};
      this.add = data.add;
      this.bjTime = data.locationTime;
      this.icon ={url:data.url,size:{height:60,width: 60},opts: {imageSize: {height:60,width: 60}}};
      //this.fentchSosNum();
    },
    created() {
    }
  }
</script>
<style scoped>
  .bm-view {
    width: 100%;
    height: 300px;
  }

  .power-img {
    width: 15px;
    height: 25px
  }
  .r-control{
    margin-left: 79%;
    margin-top: 20%;
  }
  .dianchi{
    font-size: 10px;
    margin: 5px;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    border:0px solid;
    border-radius:20px;
    text-align: center;
  }
  .p-0{
    margin-top: 8px;
    color: #ef5e63;
  }
  .p-1{
    margin-top: 8px;
    color: #36c12d;
  }
  .mm-control{
    font-size: 16px;
  }
  .foot-container{
    display: flex;
  }
  .foot-childDiv{
    flex: 1;
    font-size: 12px;
  }
  .foot-img{
    width: 40px;
  }
  .sos-num{
    margin-right: 20px;
    float: right;
    width: 15px;
    color: #fff;
    font-size: 10px;
    margin-top: -65px;
    padding: 2px;
    background: #ef5e63;
    border:0px solid;
    border-radius:20px;
    text-align: center;
  }

</style>
